<template>
  <div class="img-preview" @mousewheel="mousewheel">
    <div class="tools">
      <div class="download iconfont icon-download"></div>
      <div class="close icon-close iconfont"></div>
    </div>
    <div class="img" ref="img">
      <img :src="imgSrc" alt="" :style="{ transform: `scale(${scale})` }" />
      <span>{{ description }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgSrc: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      scale: 1
    }
  },

  methods: {
    outImgClick(e) {
      if (e.target.contains(this.$refs.img)) {
        document.body.removeChild(this.$el)
        this.move()
      }
    },

    // 允许页面滑动
    move() {
      const mo = function(e) {
        e.preventDefault()
      }
      document.body.style.overflow = ''
      document.removeEventListener('touchmove', mo, false)
    },

    // 鼠标滚动图片放大缩小
    mousewheel(e) {
      this.scale = e.deltaY > 0 ? 1 : 1.5
    }
  },
  mounted() {
    this.$el.addEventListener('click', this.outImgClick)
  },
  unmounted() {
    this.$el.removeEventListener('click', this.outImgClick)
  }
}
</script>
